<template>
	<view class="navigator flex_sbc">
		<navigator open-type="navigateBack" hover-class="none" class="uni-585C66">取消</navigator>
		<view class="z-font-32">选择已有课程</view>
		<view class="uni-color-main">确认</view>
	</view>
	<scroll-view scroll-y class="content" @scrolltolower="nextPage">
		<view class="switch-box flex_sbc">
			<view :class="['item', !tabStatus ? 'uni-white-bg text-w' : 'uni-585C66']" @click="switchTab(0)">
				全部课程
			</view>
			<view :class="['item', tabStatus ? 'uni-white-bg text-w' : 'uni-585C66']" @click="switchTab(1)">
				体系课程
			</view>
		</view>
		<search-box class="uni-mt-32" @search="search"></search-box>
		<view class="z-font-32 uni-mt-40">
			已选择课程
			<text class="uni-orange">{{ selList.length }}</text>
			个
		</view>
		<view v-if="tabStatus">
			<view v-for="item in data.list" :key="item.id">
				<view class="system-box flex_sbc" @click="item.ext = !item.ext">
					<view class="text-w flex_fsc">
						<view class="u-line-1" style="max-width: 400rpx">{{ item.name }}:</view>
						<view class="flex_sh">关联课程 {{ item.courseList ? item.courseList.length : 0 }} 个</view>
					</view>
					<image
						:src="setting.oss_pub_domain + '/app-img/icon/icon_drop-up.png'"
						class="icon-size-32"
						:style="{ transform: `rotate(${item.ext ? 180 : 0}deg)`, transition: 'all .3s' }"
					></image>
				</view>
				<view v-if="item.courseList && item.ext">
					<view
						v-for="course in item.courseList"
						:key="course.id"
						:class="[
							'plan-box active',
							selList.findIndex((el) => el.id === course.id) >= 0 ? 'active' : 'no'
						]"
						@click="selItem(course)"
					>
						<view class="flex_fs">
							<image
								:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
									selList.findIndex((el) => el.id === course.id) >= 0 ? '' : '-no'
								}.png`"
								class="icon-size-32"
							></image>
							<view class="uni-ml-12">
								<view class="z-font-32 u-line-1" style="width: 580rpx">{{ course.name }}</view>
								<view class="uni-color-grey z-font-24 uni-mt-12">
									关联个{{ course.relQuestionCount }}问题 | {{ course.relSchemeCount }}个解决方案
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view
				v-for="item in data.list"
				:key="item.id"
				:class="['plan-box active', selList.findIndex((el) => el.id === item.id) >= 0 ? 'active' : 'no']"
				@click="selItem(item)"
			>
				<view class="flex_fs">
					<image
						:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
							selList.findIndex((el) => el.id === item.id) >= 0 ? '' : '-no'
						}.png`"
						class="icon-size-32"
					></image>
					<view class="uni-ml-12">
						<view class="z-font-32 u-line-1" style="width: 580rpx">{{ item.name }}</view>
						<view class="uni-color-grey z-font-24 uni-mt-12">
							关联个{{ item.relQuestionCount }}问题 |
							{{ item.relSchemeCount }}个解决方案
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<bottom-box :buts="buts" @change="buttonClick" :interval="false" intervalBg="#FFFFFF"></bottom-box>
</template>

<script setup>
import { getCourseList } from '@/api/course.js';
import { getPlanList } from '@/api/plan.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();

let eventChannel;
onLoad((opt) => {
	selList.value = uni.getStorageSync('select-course') || [];
	eventChannel = that.getOpenerEventChannel();
	fetchData();
});

// 头部切换
const tabStatus = ref(0);
function switchTab(index) {
	if (index === tabStatus.value) return;
	tabStatus.value = index;
	data.pageNum = 1;
	fetchData();
}
// 选择课程
const selList = ref([]);
function selItem(item) {
	const index = selList.value.findIndex((el) => el.id === item.id);
	if (index >= 0) {
		selList.value.splice(index, 1);
	} else {
		selList.value.push(item);
	}
}
//  加载数据
const data = reactive({
	list: [],
	pageNum: 1,
	pageSize: 10,
	total: 0
});
function search(name) {
	this.pageNum = 1;
	fetchData({ name });
}

function fetchData(query = {}) {
	[getCourseList, getPlanList]
		[tabStatus.value]({
			pageNum: data.pageNum,
			pageSize: data.pageSize,
			course: 1,
			...query
		})
		.then((res) => {
			if (data.pageNum === 1) {
				data.list = res.rows;
			} else {
				data.list.push(...res.rows);
			}
			data.total = res.total;
		});
}

function nextPage() {
	if (data.list.length === data.total) return;
	data.pageNum += 1;
	fetchData();
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function buttonClick() {
	eventChannel.emit('selCourse', selList.value);
	uni.navigateBack();
}
</script>

<style lang="scss">
@import '@/assets/select.scss';
.switch-box {
	width: 100%;
	height: 88rpx;
	background: $uni-F5F5F5;
	border-radius: 24rpx;
	box-sizing: border-box;
	padding: 0 8rpx;
	.item {
		width: 336rpx;
		height: 72rpx;
		border-radius: 16rpx;
		line-height: 72rpx;
		text-align: center;
	}
}
.system-box {
	width: 100%;
	height: 88rpx;
	background: $uni-F5F5F5;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	margin-top: 30rpx;
}
</style>
